<!--
 * @Description: 抓取配置
 * @Author: hanyu
 * @Date: 2022-03-09 00:58:24
 * @LastEditTime: 2022-03-16 16:38:37
 * @LastEditors: hanyu
-->
<template>
    <div class='option-box'>
        <div class="row-box">
            <div class="row-left">
                敏感词分类设置
            </div>
            <div class="row-right">
                <CheckboxGroup v-model="listData.sensitive_words_cate">
                    <Checkbox :label=" '' + sItem.id + ''" :value="sItem.id" v-for="sItem in sensitiveCategoryList" :key="sItem.id">
                        {{sItem.cate_name}}
                    </Checkbox>
                </CheckboxGroup>
            </div>
        </div>
        <div class="row-box">
            <div class="row-left">
                网站地区设置
            </div>
            <div class="row-right">
                <CheckboxGroup v-model="listData.website_area">
                    <Checkbox :label="'' +aItem.id + ''" v-for="aItem in areaList" :key="aItem.id" :value="aItem.id">
                        {{aItem.area_name}}
                    </Checkbox>
                </CheckboxGroup>
            </div>
        </div>
        <Row class="flex-j-center" style="width: 100%;margin-top: 86px">
            <Button type="primary" @click="onSubmit" style="margin-right: 50px;width: 100px">确定</Button>
            <Button @click="onCancel" style="width: 100px">取消</Button>
        </Row>
    </div>
</template>

<script>
import {
  allApi
} from '@/api/allApi';
export default {
  data() {
    //这里存放数据
    return {
      areaList: [], // 网站地区设置
      sensitiveCategoryList: [], // 敏感词分类
      listData: {
        website_area: null,
        sensitive_words_cate: null
      }, // 选中的 ID
    };
  },
  async mounted() {
    await this.sensitiveCategory()
    this.websiteArea()
    this.grabList()
  },
  //方法集合
  methods: {
    // 获取城市列表
    async websiteArea() {
      this.$Spin.show();
      try {
        const res = await allApi.websiteArea()
        this.areaList = res.data.list
      } catch (error) {
        console.log(error);
      }
      this.$Spin.hide();
    },
    async onSubmit() {
      try {
        this.$Spin.show()
        try {
          const sensitive_words_cate = String(this.listData.sensitive_words_cate)
          const website_area = String(this.listData.website_area)
          await allApi.grabConfig({ sensitive_words_cate, website_area })
          this.$Message.success('修改成功')
        } catch (error) {
          console.log(error);
        }
        this.$Spin.hide()
      } catch (error) {
        console.log(error);
      }
    },
    onCancel() {
      this.$emit('onCancel')
    },
    async sensitiveCategory() {
      try {
        this.$Spin.show()
        const res = await allApi.sensitiveCategory()
        this.sensitiveCategoryList = res.data.rows
      } catch (error) {
        console.log(error);
      }
      this.$Spin.hide()
    },
    async grabList() {
      try {
        this.$Spin.show()
        let res = await allApi.grabList()
        const sensitive_words_cate = res.data.sensitive_words_cate.split(',')
        const website_area = res.data.website_area.split(',')
        this.listData = {
          sensitive_words_cate: sensitive_words_cate,
          website_area: website_area
        }
      } catch (error) {
        console.log(error);
      }
      this.$Spin.hide()
    },
  },
}
</script>
<style lang='less' scoped>
.option-box {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  .row-box {
    display: flex;
    padding-top: 30px;
    .row-left {
      color: #727171;
      font-size: 14px;
      width: 180px;
      margin-top: 10px;
    }
    .row-right {
      margin-left: 70px;
      padding-bottom: 40px;
      border-bottom: 1px solid rgba(114, 112, 113, 0.5);
      .c-box-title {
        display: flex;
      }
    }
    &:last-child {
      .row-right {
        border: 0;
      }
    }
  }
}
/deep/ .ivu-checkbox-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
/deep/ .ivu-checkbox-group-item {
  margin-top: 10px;
  text-align: left;
}
</style>